<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>

<meta charset="UTF-8">
<title>Share Your Way</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap -->
<link
	href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
	rel="stylesheet">
<!-- Font Awesome -->
<link
	href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"
	rel="stylesheet">

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="js/bootbox.min.js"></script>

<style>
.input-group-addon {
	min-width: 86px;
	text-align: center;
}
</style>
</head>

<body style="background-color: #0065BD;">
	<div class="navbar navbar-default navbar-static-top"
		style="height: 55px; background-image: linear-gradient(to bottom, #0080F0, #0065BD); border-bottom: #0065BD;">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#" style="color: white;"><b>UPC
						Share Your Way</b></a>
			</div>
			<div class="collapse navbar-collapse">

				<ul class="nav navbar-nav navbar-right" style="padding-right: 35px">
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown" style="color: white;"><b>Login</b> <b
							class="caret"
							style="border-bottom-color: white; border-top-color: white;"></b></a>
						<div class="dropdown-menu" role="menu" style="padding: 14px;">
							<form wicket:id="form-login" class="form-group" role="form">
								<input wicket:id="email" style="margin: 2px" type="text"
									class="form-control" id="exampleInputEmail2"
									placeholder="Email"> <input wicket:id="pass"
									style="margin: 2px" type="password" class="form-control"
									id="exampleInputPassword2" placeholder="Password"> <input
									wicket:id="signin" style="margin-top: 2px" value="Sign in"
									type="submit" class="btn btn-primary btn-sm pull-right" />
								<button style="margin-top: 2px" type="submit"
									class="btn btn-primary btn-sm pull-left" data-toggle="modal"
									data-target="#myModal">Register</button>
							</form>
						</div></li>
					
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown"><i class="fa fa-facebook fa-2x"
							style="color: #FFFFFF;"></i></a>
						<ul class="dropdown-menu" role="menu" style="padding: 14px;">
							<li><fb:login-button style="padding-left:20px;"
									autologoutlink="true"
									perms="email,user_birthday,status_update,publish_stream"></fb:login-button></li>
						</ul></li>
					<!-- #3B57A0 -->
				</ul>

			</div>
			<!--/.nav-collapse -->
		</div>
	</div>

	<div id="myCarousel" class="carousel slide"
		style="position: absolute; top: 0; left: 0; width: 100%; padding-top: 0px; height: 600px; border-radius: 5px;">
		<!-- Indicators -->
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
		</ol>
		<div class="carousel-inner">
			<div class="item active"
				style="border-radius: 5px; height: 600px; background-color: #bbb; padding-top: 55px;">
				<img src="img/rodalies.jpg" height="600">
				<div class="container">
					<div class="carousel-caption">
						<h1>Vols arribar abans a la teva universitat?</h1>
						<p>
							<button type="submit" class="btn btn-primary btn-sm"
								data-toggle="modal" data-target="#myModal">Register</button>
						</p>
					</div>
				</div>
			</div>
			<div class="item"
				style="border-radius: 5px; height: 600px; background-color: #bbb; padding-top: 55px;">
				<img src="img/highway.jpg" height="600">
				<div class="container">
					<div class="carousel-caption">
						<h1>Vols coneixer companys i compartir les despeses del
							viatge?</h1>
						<p>
							<button type="submit" class="btn btn-primary btn-sm"
								data-toggle="modal" data-target="#myModal">Register</button>
						</p>
					</div>
				</div>
			</div>
			<div class="item"
				style="border-radius: 5px; height: 600px; background-color: #bbb; padding-top: 55px;">
				<img src="img/logo.png" height="600">
				<div class="container">
					<div class="carousel-caption">
						<h1 style="color: black;">Ho tens tot amb UPC ShareYourWay</h1>
						<p style="color: black;">Registra't ara!</p>
						<p>
							<button type="submit" class="btn btn-primary btn-sm"
								data-toggle="modal" data-target="#myModal">Register</button>
						</p>
					</div>
				</div>
			</div>
		</div>
		<!-- Controls -->
		<a class="left carousel-control" href="#myCarousel" data-slide="prev">
			<span class="icon-prev"></span>
		</a> <a class="right carousel-control" href="#myCarousel"
			data-slide="next"> <span class="icon-next"></span>
		</a>
	</div>

	<div class="container" style="padding-top: 535px; width: 100%;">
		<div class="row">
			<div class="col-md-4 pull-right text-center">
				<!-- /.carousel -->
				<p style="color: white;">
					<b>Fet per EA Grup 2</b>
				</p>
			</div>
		</div>
		<!-- <input  wicket:id="registrar" type="button" value="Registrarse" id="registrar"  class="btn btn-primary"> -->
	</div>
	<!-- /.container -->

	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="true"
		style="overflow-y: hidden; overflow-x: hidden;">
		<div class="modal-dialog" style="width: 26%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">Register to UPC
						Share Your Way!</h4>
				</div>
				<form class="form-horizontal" role="form" wicket:id="form-register">
					<div class="modal-body">
						<div class="input-group" style="padding: 7px;">
							<span class="input-group-addon">Name</span> <input type="text"
								class="form-control" id="tname" wicket:id="tname">
						</div>
						<div class="input-group" style="padding: 7px;">
							<span class="input-group-addon">Surname</span> <input type="text"
								class="form-control" id="tsurname" wicket:id="tsurname">
						</div>
						<div class="input-group" style="padding: 7px;">
							<span class="input-group-addon">Nickname</span> <input
								type="text" class="form-control" id="tnick" wicket:id="tnick">
						</div>
						<div class="input-group" style="padding: 7px;">
							<span class="input-group-addon">Email</span> <input type="text"
								class="form-control" id="tmail" wicket:id="tmail">
						</div>
						<div class="input-group" style="padding: 7px;">
							<span class="input-group-addon">Password</span> <input
								type="text" class="form-control" id="tpassword" wicket:id="tpassword">
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" id="saveuser" wicket:id="saveuser">Confirm</button>
					</div>
				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->

	<!-- Scripts -->
	<script src="https://code.jquery.com/jquery.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script
		src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

	<div id="fb-root"></div>
	<script type="text/javascript">
			window.fbAsyncInit = function() {
				FB.init({
					appId : '234266333400027',
					status : true,
					cookie : true,
					xfbml : true
				});

				/* All the events registered */
				FB.Event.subscribe('auth.login', function(response) {
					// do something with response
					login();
					getparams();
				});
				FB.Event.subscribe('auth.logout', function(response) {
					// do something with response
					logout();
				});
			};
			(function() {
				var e = document.createElement('script');
				e.type = 'text/javascript';
				e.src = document.location.protocol
						+ '//connect.facebook.net/en_US/all.js';
				e.async = true;
				document.getElementById('fb-root').appendChild(e);
			}());

			function login() {
				FB.api('/me', function(response) {
					document.getElementById('login').style.display = "block";
					document.getElementById('login').innerHTML = response.name
							+ " succsessfully logged in!";
				});
			}
			function logout() {
				document.getElementById('login').style.display = "none";
				document.getElementById('login').innerHTML = response.name
						+ " succsessfully logged out!";
			}
			function getparams() {
				FB
				.api(
						'/me',
						function(response) {
							var query = FB.Data
									.query(
											'select first_name, last_name, email, pic_square from user where uid={0}',
											response.id);
							query
									.wait(function(rows) {
										alert('Hola '+rows[0].first_name +' '+rows[0].last_name+', hem agafat el teu email ('+rows[0].email+') per tal de poder crear-te un perfil al nostre web.');
										//$('#myModal').modal('show');
										$('#tname').val(rows[0].first_name);
										$('#tsurname').val(rows[0].last_name);
										$('#tnick').val("facebookUser");
										$('#tmail').val(rows[0].email);
										$('#tpassword').val("facebook");
										$("#saveuser").click(function(){alert('El procés de registre pot trigar uns segons...');}).click();
										/* bootbox.dialog({
											message: '<br><img src="'+rows[0].pic_square+'"/></br><br>Nombre: '+rows[0].first_name +'</br><br>Apellido: '+rows[0].last_name+'</br><br>Email: '+rows[0].email+'</br>',
											title: "Sesion de facebook correcta!",
											buttons: {
											main: {
											label: 'Iniciar sesion',
											className: "btn-primary",
											callback: function() {
												window.location.href = "wicket/bookmarkable/ShareYourWay.webpages.Meets?fname="+rows[0].first_name+"&lname="+rows[0].last_name+"&email="+rows[0].email;
											}
											},
											danger: {
												label: "Cancelar",
												className: "btn-primary",
												callback: function() {
													window.location.href = "";
												}
												}
											}
											}).show(); */
										
									});
						});
			}
			
		</script>

</body>
</html>